<template>
    <template v-if="(item.type === 'object' || item.type === 'array') && expandedItems[itemKey]">
        <template v-for="(field, fieldIndex) in item.fields || []" :key="fieldIndex">
            <tr class="nested-row">
                <td>
                    <div class="name-input-wrapper">
                        <input v-model="field.name" class="table-input" placeholder="属性名"
                            :style="{ paddingLeft: `${20 * props.level}px` }" />
                        <IconAdd v-if="field.type === 'object' || field.type === 'array'" class="expand-icon"
                            :class="{ 'expanded': expandedItems[`${itemKey}-field-${fieldIndex}`] }"
                            @click="toggleExpansion(`${itemKey}-field-${fieldIndex}`)" title="展开编辑子属性" />
                    </div>
                </td>
                <td>
                    <select v-model="field.type" class="table-select">
                        <option value="string">string</option>
                        <option value="number">number</option>
                        <option value="boolean">boolean</option>
                        <option value="object">object</option>
                        <option value="array">array</option>
                    </select>
                </td>
                <td>
                    <input type="checkbox" v-model="field.required" />
                </td>
                <td>
                    <input v-model="field.description" class="table-input" placeholder="说明" />
                </td>
                <td>
                    <div class="action-buttons">
                        <button v-if="field.type === 'object' || field.type === 'array'" class="add-nested-btn"
                            @click="addNestedField(field, itemKey, `${itemKey}-field-${fieldIndex}`)" title="添加子属性">
                            <IconAdd />
                        </button>
                        <button class="delete-btn" @click="removeNestedField(item, fieldIndex, itemKey)">
                            <IconDelete />
                        </button>
                    </div>
                </td>
            </tr>
            <!-- 递归渲染更深层的嵌套 -->
            <RecursiveEditRow
                v-if="(field.type === 'object' || field.type === 'array') && expandedItems[`${itemKey}-field-${fieldIndex}`]"
                :item="field" :item-key="`${itemKey}-field-${fieldIndex}`" :expanded-items="expandedItems"
                :level="props.level + 1" @toggle-expansion="toggleExpansion" @add-nested-field="addNestedField"
                @remove-nested-field="removeNestedField" />
        </template>
    </template>
</template>

<script setup lang="ts">
import { IconAdd, IconDelete } from '@/common/components/icons';

interface Field {
    name: string;
    type: string;
    required: boolean;
    description: string;
    fields?: Field[];
}

interface Props {
    item: Field;
    itemKey: string;
    expandedItems: Record<string, boolean>;
    level?: number;
}

interface Emits {
    toggleExpansion: [key: string];
    addNestedField: [item: Field, parentKey: string, itemKey: string];
    removeNestedField: [item: Field, fieldIndex: number, parentKey: string];
}

const props = withDefaults(defineProps<Props>(), {
    level: 1
});
const emit = defineEmits<Emits>();

const toggleExpansion = (key: string) => {
    emit('toggleExpansion', key);
};

const addNestedField = (item: Field, parentKey: string, itemKey: string) => {
    emit('addNestedField', item, parentKey, itemKey);
};

const removeNestedField = (item: Field, fieldIndex: number, parentKey: string) => {
    emit('removeNestedField', item, fieldIndex, parentKey);
};
</script>

<style lang="less">
.nested-row {
    background: transparent;

    // 确保嵌套行继承父表格的样式
    td {
        padding: 10px 12px;
        text-align: left;
        border: 1px solid var(--border-light);
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    &:hover td {
        background: rgba(107, 114, 128, 0.1) !important;
        transition: background-color 0.2s ease;
    }

    .name-input-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;

        // 嵌套输入框缩进
        .table-input {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-primary);
            font-size: 12px;
            outline: none;

            &:focus {
                border-color: var(--primary-color);
                background: var(--bg-secondary);
            }

            &::placeholder {
                color: var(--text-secondary);
            }
        }

        .expand-icon {
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 13px;
            fill: var(--text-secondary);

            &:hover {
                fill: var(--primary-color);
                transform: scale(1.1);
            }

            &.expanded {
                transform: rotate(45deg);
                fill: var(--primary-color);
            }
        }
    }

    // 嵌套选择框样式
    .table-select {
        width: 100%;
        padding: 4px 8px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-primary);
        font-size: 12px;
        outline: none;
        cursor: pointer;

        &:focus {
            border-color: var(--primary-color);
            background: var(--bg-secondary);
        }
    }

    // 嵌套输入框样式
    .table-input {
        width: 100%;
        padding: 4px 8px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-primary);
        font-size: 12px;
        outline: none;

        &:focus {
            border-color: var(--primary-color);
            background: var(--bg-secondary);
        }

        &::placeholder {
            color: var(--text-secondary);
        }
    }

    .action-buttons {
        display: flex;
        align-items: center;
        gap: 4px;

        .add-nested-btn {
            padding: 4px 6px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                background: var(--primary-light);
                transform: scale(1.05);
            }

            :deep(svg) {
                width: 12px;
                height: 12px;
                fill: currentColor;
            }
        }

        .delete-btn {
            padding: 4px 6px;
            background: var(--error-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                background: var(--error-color);
                opacity: 0.8;
                transform: scale(1.05);
            }

            :deep(svg) {
                width: 12px;
                height: 12px;
                fill: currentColor;
            }
        }
    }
}
</style>
